<template>
  <div class="about" style="background: #f0f0f0; padding-bottom: 150px">
    <header class="header">
      <a href="">
        <i class="iconfont iconxiaoxi"></i>
      </a>

      <span class="exit" @click="exit()">退出登录</span
      >
    </header>
    <section style="margin-top: 43px">
      <!-- 头像 -->
      <!-- <router-link  class="aaa"> -->
        <div class="touxiang aaa">
          <div>
            <img src="img/beaut.png" alt="" />
          </div>
          <div><span @click="reg()">{{person.name}}</span><span>{{person.phone}}</span></div>
          <!-- <div><i class="iconfont iconyoujiantou"></i></div> -->
          <div><i class="iconfont iconyoujiantou" tag="div"></i></div>
        </div>
      <!-- </router-link> -->
      <!-- 广告 -->
      <div class="guang">
        <p>升级为钻石会员 每年省50000元</p>
        <button>立即升级</button>
      </div>
      <!-- 我的订单 -->
      <div class="dingdan">
        <div class="ding_1">
          <span>我的订单</span>
          <span>查看全部订单 <i class="iconfont iconyoujiantou"></i></span>
        </div>
        <div class="ding_2">
          <div><i class="iconfont iconicon-test"></i><span>待付款</span></div>
          <div><i class="iconfont icondaifukuan"></i><span>待发货</span></div>
          <div><i class="iconfont iconyifahuo"></i><span>已发货</span></div>
          <div><i class="iconfont iconshouhou"></i><span>售后</span></div>
        </div>
      </div>
      <div class="guang_2">
        <img src="img/ad-001.png" alt="" height="60px" width="100%" />
      </div>
      <!-- 成就奖励 -->
      <div class="gongju" style="margin-bottom: 10px">
        <div class="ding_1">
          <span>必备工具</span>
          <span>查看全部工具 <i class="iconfont iconyoujiantou"></i></span>
        </div>
        <div class="fanxian">
          <div v-for="(item, index) in nav" :key="index">
            <img :src="item.src" alt="" width="30px" />
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
      <!-- 我的问答 -->
      <div class="wode">
        <p>
          我的问答 <span><i class="iconfont iconyoujiantou"></i></span>
        </p>
      </div>
      <div class="wode_1">
        <p>
          优惠券
          <span>还没有优惠券哦<i class="iconfont iconyoujiantou"></i></span>
        </p>
        <p>
          我的兑换码
          <span>礼品卡兑换入口<i class="iconfont iconyoujiantou"></i></span>
        </p>
      </div>
      <div class="wode_1">
        <p>
          意见反馈 <span><i class="iconfont iconyoujiantou"></i></span>
        </p>
        <p>
          设置 <span><i class="iconfont iconyoujiantou"></i></span>
        </p>
      </div>
      <!-- 分享 -->
      <div class="fenxiang">
        <p><span>—————</span>分享<span>—————</span></p>
        <div>
          <span><img src="img/icon_douban.png" alt="" width="100%" /></span>
          <span><img src="img/icon_qq.png" alt="" width="100%" /></span>
          <span><img src="img/icon_qzone.png" alt="" width="100%" /></span>
          <span><img src="img/icon_weichat.png" alt="" width="100%" /></span>
          <span><img src="img/icon_xinlang.png" alt="" width="100%" /></span>
        </div>
      </div>
    </section>
  </div>
</template>


<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
.aaa {
  text-decoration: none;
  color: #000;
}
// 头部
.header {
  background: #f2f2f2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px 20px 0;
  display: flex;
  justify-content: space-between;
  height: 43px;
}
.header i {
  color: #696969;
  font-size: 24px;
}
.exit{
  margin-top: 8px;
    font-size: 12px;
    color: #696969;
}
// 头像
.touxiang {
  display: flex;
  width: 100%;
  padding: 0px 20px;
  background-color: #f2f2f2;
}
.touxiang div:nth-child(1) {
  flex: 2;
  img {
    width: 1.733333rem;
    border-radius: 50%;
  }
}
.touxiang div:nth-child(2) {
  flex: 7;
  padding-top: 5px;
  span {
    display: block;
  }
}
.touxiang div:nth-child(3) {
  flex: 1;
  padding-top: 12px;
  margin-left: 3px;
  i {
    font-size: 28px;
    color: #8c8c8c;
  }
}
.touxiang div:nth-child(2) span:nth-child(1) {
  font-size: 18px;
}
.touxiang div:nth-child(2) span:nth-child(2) {
  font-size: 16px;
  color: #8c8c8c;
}
.guang {
  color: #e5d5be;
  padding: 0 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 90%;
  height: 40px;
  margin: 15px auto 0;
  background: linear-gradient(to right, #493627 65%, #be782c);
  display: flex;
  font-size: 14px;
  p {
    line-height: 40px;
    flex: 7;
  }
  button {
    color: #ffffff;
    background: linear-gradient(to right, #a96c45, #e6ae6f);
    height: 23px;
    line-height: 18px;
    margin-top: 8px;
    outline: none;
    border: none;
    border-radius: 20px;
    display: inline-block;
    flex: 2;
  }
}
.dingdan,
.gongju {
  width: 90%;
  margin: 20px auto;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  padding: 15px 20px 10px;
  background-color: #fff;
}
.ding_1 {
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 14px;
  // padding-bottom: 5px;
}
.ding_1 span:nth-child(1) {
  margin-left: 8px;
}
.ding_1 span:nth-child(2) {
  margin-left: 8px;
  color: #999999;
}
.ding_2 span:nth-child(2) {
  color: #8c8c8c;
  margin-right: 8px;
}
.ding_2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 15px 0 5px;
  text-align: center;
  i {
    display: block;
    font-size: 26px;
    color: #ff7e00;
    width: 44px;
    text-align: center;
    background-color: #fbf3e8;
    border-radius: 50%;
    margin-bottom: 5px;
  }
  span {
    width: 43px;
    display: block;
  }
}
.guang_2 {
  width: 90%;
  margin: 0 auto;
  img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}
// 成就奖励
.fanxian {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 5px;
  margin-bottom: 10px;
}
.fanxian div {
  text-align: center;
  width: 25%;
  display: flex;
  flex-direction: column;
  img {
    margin: 15px auto 5px;
  }
}
// 我关注的频道
.guanzhu {
  width: 90%;
  margin: 0px auto;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  padding: 0px 0px 10px;
}
.wode {
  width: 90%;
  height: 45px;
  margin: 20px auto;
  border-radius: 15px;
  line-height: 45px;
  padding: 0 20px;
  font-size: 16px;
  background-color: #fff;
  p span {
    color: #999999;
    float: right;
  }
}
.wode_1 {
  width: 90%;
  margin: 20px auto;
  border-radius: 15px;
  // line-height: 45px;
  padding: 0 20px;
  font-size: 16px;
  background-color: #fff;
  p {
    height: 50px;
    line-height: 50px;
    margin-bottom: 0;
    span {
      font-size: 14px;
      color: #999999;
      float: right;
    }
  }
  p:nth-child(2) {
    border-top: 1px solid #cccccc;
  }
}
// 分享
.fenxiang {
  width: 80%;
  margin: 25px auto 0;
  p {
    text-align: center;
    font-size: 16px;
    color: #999999;
    margin-bottom: 5px;
    span {
      margin: 0 20px;
    }
  }
  div {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    span {
      display: inline-block;
      width: 15%;
      border-radius: 50%;
      background-color: #ffffff;
    }
  }
}
</style>


<script>
export default {
  data() {
    return {
      nav: [
        // 底部标签数据
        { src: "img/tb_1.png", title: "每日返现" },
        { src: "img/tb_2.png", title: "领券中心" },
        { src: "img/tb_3.png", title: "闲置换钱" },
        { src: "img/tb_4.png", title: "客服小蜜" },
        { src: "img/tb_5.png", title: "花呗" },
        { src: "img/tb_6.png", title: "我的快递" },
        { src: "img/tb_7.png", title: "我的评价" },
        { src: "img/tb_8.png", title: "主题" },
      ],
      path: {
        lujin_1: "/Login",
        lujin_2: "/Person",
      },
       person:{name:'登录',phone:'15979005213',pic:'../../public/img/beaut.png'},
      // is_show:falese,
    };
  },
  components: {
    watch: {
      /*监听路由appDesign时 隐藏header */
      $route(to, from) {
        if (to.path === "/Login") {
          this.is_show = true;
        } else {
          this.is_show = false;
        }
      },
    },
  },
  methods:{
            fun:function(){
                  // this.account=JSON.parse(localStorage.getItem('address'))
                var person=JSON.parse(localStorage.getItem('personMsg'));   //获取本地存储的用户地址等信息
               if(person==null){

               }else{
                  // console.log(address);
                this.person.name=person.name;  
                this.$store.state.username=person.name; 
                this.$store.state.arr=person.list; 

                // console.log( this.$store.state.username);
                this.person.phone=person.phone;   
                // this.person.pic=person.pic; 
                // console.log(this.$store.state.username);
               }
            },
            exit(){
              console.log(123);
               localStorage.clear();
                this.person={name:'登录',phone:'15979005213',pic:'../../public/img/beaut.png'};
            },
            reg(){
              if(this.person.name=='登录'){
               this.$router.push({path:'/Login'})
              }
            }
    },
  mounted(){
            //自动加载indexs方法
            this.fun();
  }
};
</script>